<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Connect To Your Phone - App Inventor for Android
    </title>
    <link href="/static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="/static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="/static/css/appinventor.css" rel="stylesheet">
    <script src="http://www.google.com/js/gweb/analytics/autotrack.js">
</script>
    <script>
  var tracker = new gweb.analytics.AutoTrack({
        profile: 'UA-5856106-2'
      });
    </script>
    <style>
img.c3 {border-width:0}
    div.c2 {text-align: center;}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="/about/"><img alt="" src="/static/images/appinventor_logo.gif"></a>
          </div>
          <form action="http://www.google.com/cse" id="cse-search-box">
            <input name="cx" type="hidden" value="011848991959401852367:xnrcbhk2zus"> <input name=
            "ie" type="hidden" value="UTF-8">
            <div class="header-search">
              <div class="header-search-query">
                <input class="textbox" name="q" type="text">
              </div>
              <div class="header-search-button">
                <input name="sa" src="/static/images/search-button.png" type="image">
              </div>
            </div>
          </form><script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"
         >
</script>
          <div class="header-login">
            <div class="header-login-greeting">
              Learn about App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="/about/">About</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="/learn/">Learn</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="/forum/">Forum</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="http://appinventor.googlelabs.com/ode/Ya.html" target="_blank">My
              Projects</a>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="/learn/">Learn</a> &gt; <a href="/learn/gettingstarted.html">Getting
            Started</a> &gt; <a href="/learn/setup/">Setup</a> &gt; Connect To Your Phone &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Connect App Inventor to Your Phone
              </h1>
              <p>
                App Inventor runs through a Web browser. Your phone will be connected to your
                computer through a USB cord and your app will emerge on the phone as you work in
                the Web browser. When you're done, you can "package" your finished app to produce
                an "application package" (Android apk file) that can be shared around and installed
                on any Android phone, just like any other Android app.
              </p>Before you can use App Inventor, your computer and phone need to be set up. If
              someone has already done this for you, you can continue right below. Otherwise, visit
              <a href="index.html">Setting up your computer and phone to use App Inventor</a> and
              then return here.
              <h2>
                Create a New Project
              </h2>
              <p>
                Using a web browser to go to <a href=
                "http://appinventor.googlelabs.com">http://appinventor.googlelabs.com</a>. You
                should see an empty Projects page. To create a new project:
              </p>
              <ol>
                <li>Press the <span class="ButtonText">New</span> button near the top left of the
                page.
                </li>
                <li>Enter a project name in the dialog box that appears and press OK.
                </li>
              </ol>
              <p>
                The browser page should change to look like the figure below. This is the App
                Inventor <span class="ButtonText">Designer</span>. This is where you'll create the
                pieces of your apps — buttons, text labels, pictures, and so on — by dragging them
                from the column of components on the left to the viewer in the center.
              </p>
              <div class="c2">
                <img alt="" height="408" src="StartingAssets/designer.png" width="620">
              </div>
              <h2>
                Open the Blocks Editor
              </h2>
              <p>
                The <span class="ButtonText">Designer</span> is one of two key tools you'll use in
                creating your apps. The other is the Blocks Editor. You'll use the Blocks Editor to
                assign behaviors to your components, such as what should happen when the user taps
                a button. To open the Blocks editor click on <span class="ButtonText">Open the
                Blocks Editor</span> button on the Designer screen. This will download the App
                Inventor Codeblocks Application and start the Blocks Editor. This brings up a new
                window, as in the figure below.
              </p>
              <div class="c2">
                <img alt="" height="356" src="StartingAssets/blockseditor.png" width="620">
              </div>
              <blockquote class="notice">
                <b>Tips:</b>
                <ol>
                  <li>It may take 30 seconds or so to download and start the Blocks Editor
                  &amp;mdash that's normal. You'll also need to allow permission for the
                  application to run.
                  </li>
                  <li>Depending on how your browser is configured, it might download the
                  application, but not automatically launch the Blocks editor, in which case you'll
                  have to launch the application manually after it downloads.
                  </li>
                  <li>When the Blocks editor starts, it attempts to find the adb (Android Debug
                  Bridge) program, which it uses to connect to the phone. If App Inventor cannot
                  locate the program automatically, it will ask you to enter the location where adb
                  is stored. Be sure to enter the complete file name, including (on the Mac or
                  GNU/Linux) adb, and (on Windows) adb.exe. Once you've entered this, App Inventor
                  will remember the location for future sessions. If you change computers, you may
                  need to enter a new location.
                  </li>
                  <li>App Inventor will become confused if, in the step above, you enter the name
                  of a path that exists on your computer but is not the adb program -- for example,
                  if you enter just the directory name without adb or adb.exe. App Inventor will
                  now keep trying to use this "bad" path as a place to find adb. One way to fix
                  this is to temporarily rename the file or directory at the path you entered, so
                  that App Inventor won't find something at that path. That will make App Inventor
                  forget the bad path it is using. Then you can undo the name change, restart the
                  Block Editor, and enter the correct place for it to look.
                  </li>
                </ol>
              </blockquote>
              <h2>
                Connect the Phone to the Computer
              </h2>
              <p>
                To finish connecting the phone to your computer, tap the <span class=
                "ButtonText">Connect to Phone</span> button at the top of the Blocks Editor. The
                text should change to <span class="ButtonText">Connecting</span>, and when the
                connection is complete the text will change to <span class="ButtonText">Restart
                Phone App</span>. The phone should start the AppInventor Phone Application, which
                displays on the phone as a blank white screen with the word <span class=
                "ButtonText">Screen1</span> at the top, as shown here:
              </p>
              <div class="c2">
                <img alt="" height="402" src="StartingAssets/PhoneApp.png" width="300">
              </div>Later, while you're working, you can use the Restart Phone App button to
              restart the phone if things get hung up. Also, if the phone becomes disconnected, the
              button will change back to Connect to Phone as a signal that the connection has
              broken. You can press the button to reconnect.
              <p>
                At last, everything is set up. You're ready to go to <a href=
                "/learn/tutorials/index.html">the tutorials</a> to work on your first App Inventor
                app!
              </p>
              <blockquote class="notice">
                <b>Tips:</b>
                <ol>
                  <li>If your app on the phone doesn't look or act as you expect it to, try
                  clicking the Restart Phone App button to reload your current project to the
                  phone. This is a good troubleshooting approach.
                  </li>
                  <li>If App Inventor is unable to communicate with the app on the phone the button
                  text will change back to <span class="ButtonText">Connect to Phone</span>
                  </li>
                  <li>If you unplug your phone from your computer or close the Blocks Editor
                  window, your app on the phone will go away. Don't worry, it will come back the
                  next time you plug in your phone and click the <span class="ButtonText">Connect
                  to Phone</span> button
                  </li>
                </ol>
              </blockquote>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/" rel="license"><img alt=
              "Creative Commons License" class="c3" src=
              "http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              This work is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/"
              rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              ©2011 Google<br>
              <a href="/about/index.html">About</a> | <a href="/about/privacy.html">Privacy</a> |
              <a href="/about/termsofservice.html">Terms</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script>
  if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>